<template>
  <div class="edit-goods-code-warpper">
    <el-form
      ref="ruleform"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="" label-width="84">
        <div style="display: flex; align-items: center;">
          <el-radio v-model="form.type" label="0">方式1</el-radio>
          <div>
            统一设置新的商品编码：<el-input v-model="form.new_title" placeholder="请输入内容" style="width: 240px; margin: 0 12px;" />若输入为空，则清空商品编码
          </div>
        </div>
        <div style="display: flex; align-items: center; margin-top: 12px;">
          <el-radio v-model="form.type" label="1">方式2</el-radio>
          <div>
            <el-input v-model="form.prefix" placeholder="输入前缀" style="width: 240px;" />
            <span style="margin: 0 8px;">+</span>
            <el-select v-model="form.middle_type" placeholder="请选择" class="middle-type">
              <el-option
                v-for="item in pageInfo.middleTypeArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span style="margin: 0 8px;">+</span>
            <el-input v-model="form.suffix" placeholder="输入后缀" style="width: 240px;" />
          </div>
        </div>
        <div style="display: flex; margin-top: 12px;">
          <el-radio v-model="form.type" label="2" style="padding-top: 10px;">方式3</el-radio>
          <div>
            <el-form-item
              v-for="(item, index) in form.replaceKeywords"
              :key="index"
              :prop="'domains' + index + 'value'"
              :style="{'margin-top': index === 0 ? '0' : '12px'}"
            >
              <span :style="{opacity: index === 0 ? '1' : '0'}">关键字：</span>
              <el-input
                v-model="item.replaceBefore"
                placeholder="输入内容"
                style="width: 240px;"
              />
              <span style="margin: 0 8px;">替换为-></span>
              <el-input
                v-model="item.replaceAfter"
                placeholder="输入内容"
                style="width: 240px;"
              />
              <span style="font-size: 24px; vertical-align: middle; margin-left: 12px;">
                <i v-if="index === 0" class="el-icon-circle-plus-outline" style="color: #4E78EF; cursor: pointer;" @click="addDomain" />
                <i v-else class="el-icon-remove-outline" style="color: #EE0000; cursor: pointer;" @click.prevent="removeDomain(item)" />
              </span>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex; margin-top: 12px;">
          <el-radio v-model="form.type" label="3" style="padding-top: 10px;">方式4</el-radio>
          <div>
            <el-form-item label="删除关键字：" prop="delete_words" class="keywords-textarea">
              <el-input
                v-model="form.delete_words"
                type="textarea"
                placeholder="多个关键字用回车或者英文逗号分隔"
              />
            </el-form-item>
            <el-button @click="form.delete_words = ''">清空</el-button>
          </div>
        </div>
        <div style="display: flex; margin-top: 16px;">
          <el-radio v-model="form.type" label="4">方式5</el-radio>
          <el-radio v-model="form.type" label="5">使用{源平台字母}#{来源ID}作为商品编码</el-radio>
          <el-radio v-model="form.type" label="6">使用来源ID作为商品编码 （非本软件搬家的商品，该设置无效）</el-radio>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        typeArr: [
          {
            label: '方式1',
            value: 0
          },
          {
            label: '方式2',
            value: 1
          },
          {
            label: '方式3',
            value: 2
          },
          {
            label: '方式4',
            value: 3
          },
          {
            label: '方式5',
            value: 4
          },
          {
            label: '方式6',
            value: 5
          },
          {
            label: '方式7',
            value: 6
          }
        ],
        middleTypeArr: [
          {
            label: '商品ID',
            value: 0
          },
          {
            label: '商品编码',
            value: 1
          }
        ]
      },
      form: {
        type: 0,
        new_code: '',
        prefix: '',
        middle_type: '',
        suffix: '',
        replaceKeywords: [
          {
            replaceBefore: '',
            replaceAfter: ''
          },
          {
            replaceBefore: '',
            replaceAfter: ''
          }
        ],
        delete_words: ''
      },
      rules: {}
    }
  },
  methods: {
    addDomain() {
      this.form.replaceKeywords.push({
        replaceBefore: '',
        replaceAfter: ''
      })
    },
    removeDomain(item) {
      var index = this.form.replaceKeywords.indexOf(item)
      if (index !== -1) {
        this.form.replaceKeywords.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.edit-goods-code-warpper {
  .replace-keywords-row {
    ::v-deep {
      .el-form-item {
        &:first-of-type .el-form-item__label {
          opacity: 1;
        }
        .el-form-item__label {
          opacity: 0;
        }
      }
    }
  }
  .radio-group {
    ::v-deep {
      .el-radio {
        margin-right: 20px;
      }
    }
  }
  .keywords-textarea {
    ::v-deep {
      .el-textarea {
        width: 800px;
      }
      .el-textarea__inner {
        height: 80px;
        background-color: #F7F8FA;
        border: none;
      }
    }
  }
  .middle-type::v-deep.el-select {
    width: 120px;
  }
}
</style>
